<template>
  <div class="glass footer">
    <div class="bar">
      <div class="year d-flex ai-center pointer" @click="chooseYear">
        <img class="icon" :src="play" alt="" />
        <p class="font-num-s">{{data.month}}</p>
        <div class="yearPicker">
          <el-date-picker
            @change="monthChange()"
            ref="yearPicker"
            v-model="data.month"
            value-format="YYYY-MM"
            :disabled-date="disabledDate"
            type="month"
          />
        </div>
        
      </div>
      <div class="slide d-flex">
        <!-- <img class="slideImg pointer" :src="arrowL" alt=""> -->
        <el-scrollbar
          ref="scrollContainer"
          @wheel.prevent="handleScroll"
        >
          <div class="dates d-flex">
            <div
              v-for="(item, index) in dateList"
              :key="index"
              class="pointer"
              @click="datesActived(index)"
            >
              <div :class="['font-lan-s', item.actived ? 'actived' : '']">
                {{ item.date }}
              </div>
              <div class="trackBar d-flex">
                <div class="track"></div>
                <div :class="['btn', item.actived ? 'actived' : '']"></div>
                <div class="track"></div>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <!-- <img class="slideImg pointer" :src="arrowR" alt=""> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
const PropsType = {
  data: {
    type: Object,
    default: () => ({
      dateList:[],
      forecast:null
    }),
    require: true,
  },
} as const;
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onUnmounted,
  computed,
  watch
} from "vue";
import moment from "moment";
export default defineComponent({
  props:PropsType,
  components: {},
  setup(props,content) {
    //变量
    const play = require("@/assets/img/play.png");
    const arrowL = require("@/assets/img/arrow_left.png");
    const arrowR = require("@/assets/img/arrow_right.png");
    const dateList = ref([]);
    const dayIndex = ref(null)
    const data = reactive({
      month: moment().format("YYYY-MM"),
      actived:null,
      forecast:0
    });

    const scrollWrapper = computed(() => {
      return scrollContainer.value.wrapRef?scrollContainer.value.wrapRef:scrollContainer.value.wrap$;
    });
    const scrollContainer = ref();
    const yearPicker = ref()
    // 生命周期
    onMounted(() => {
      //

    });

    onUnmounted(() => {
      //
    });

    watch(
      () => props.data,
      (val: any) => {
        let forecast = val.forecast?val.forecast:0
        let activeIndex = val.dateList.length - 1
        if(moment(data.month).format('YYYY-MM')<moment().format('YYYY-MM')){
          activeIndex = val.dateList.length - 1
        }else if(moment(data.month).format('YYYY-MM') == moment().format('YYYY-MM')){
          activeIndex = val.dateList.length - (1+parseInt(val.dateList[val.dateList.length - 1])-parseInt(moment().format('DD')))
        }else{
          activeIndex = 0
        }
        dateList.value = val.dateList.map((item, index) => {
          return {
            date: item,
            actived: index == activeIndex ? true : false,
          };
        });
        data.actived = activeIndex
        if(scrollWrapper.value){
          setTimeout(() => {
            const $scrollWrapper = scrollWrapper.value;
            $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth;
          }, 100);
        }
        data.forecast = forecast
      }
    );

    //methods

    //
    const datesActived = (val) => {
      if(val == dayIndex.value) return
      dayIndex.value = val
      dateList.value.forEach((item, index) => {
        item.actived = index == val ? true : false;
      });
      data.actived =val
      timeChange()
    };

    const handleScroll = (e: any) => {
      const eventDelta = e.wheelDelta || -e.deltaY * 20;
      const $scrollWrapper = scrollWrapper.value;
      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft - eventDelta / 2;
    };

    const chooseYear = () => {
      yearPicker.value.focus()
    };

    const timeChange = () =>{
      content.emit('timeChange',data.month+'-'+dateList.value[data.actived].date)
    }

    const monthChange = () =>{
      content.emit('monthChange',data.month)
    }

    const disabledDate = (time)=>{
      return moment(time).format('YYYY-MM') > moment().add(data.forecast, "days").format("YYYY-MM")
    }

    // return
    return {
      data,
      play,
      arrowL,
      arrowR,
      dateList,
      datesActived,
      handleScroll,
      chooseYear,
      scrollContainer,
      yearPicker,
      disabledDate,
      monthChange
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.yearPicker{
  width: 0px;
  overflow: hidden;
  position: absolute;
  left: 0;
}
</style>
